<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<link type="text/css" href="/CommandsOnline/resources/css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="/CommandsOnline/resources/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="/CommandsOnline/resources/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function init() {
   $("#mytabs").tabs();
   // wipe all the tabs so we can programatically show the ones we want
   removeAllTabs();
   // if {condition}, then show relevant tab. this is just for example purposes
   if (true) {   $("#tabs-1-tab").css("display","list-item");}
   // now show the tabs area
   $("#mytabs").css("display","block");
}

function openTab(tabNum,closeOthers) {
   if (closeOthers != false) {
      removeAllTabs();
   }
   $("#tabs-"+tabNum+"-tab").css("display","list-item");
   $("#mytabs").tabs("select",tabNum-1);
}

function removeAllTabs() {
   $("#tablist").children().css("display","none");
}

function createTab4() {
   // this will add a tab via the standard method
   $("#mytabs").tabs("add","#tabs-4","Fourth Tab");
   $("#tabs-4").css("display","block");
}

function removeTab4() {
   // this will add a tab via the standard method. part of the problem here is I don't know the index...just assuming its on the end
   $("#mytabs").tabs("remove",$("#mytabs").tabs("length")-1);
   // reselect the 2nd tab or it will show tab 3
   $("#mytabs").tabs("select",1);
}

function createTab5() {
   // this will add a tab via the standard method
   $("#mytabs").tabs("add","registration","Fifth Tab");
}


function removeTab5() {
   // this will add a tab via the standard method. part of the problem here is I don't know the index...just assuming its on the end
   $("#mytabs").tabs("remove",$("#mytabs").tabs("length")-1);
   // reselect the 2nd tab or it will show tab 3
   $("#mytabs").tabs("select",1);
}

$(document).ready(init);
</script>	
	
	
	
	<title><spring:message code="label.title" /></title>
</head>
<body>
	Admin Main Form
<a href="<c:url value="/logout" />"> <spring:message code="label.logout" /> </a> <br>
<div id="mytabs" style="display:none;"> 
   <ul id="tablist">
      <li id="tabs-1-tab"><a href="#tabs-1">First Tab</a></li>
      <li id="tabs-2-tab"><a href="#tabs-2">Second Tab</a></li>
      <li id="tabs-3-tab"><a href="#tabs-3">Third Tab</a></li>
   </ul>
   <div id="tabs-1">
      <p>This is my first tab. It should show by default when the page is ready.</p>
      <p>If you select option 2 in this select box, it will still be selected when reopened</p>
      <p><select name="foo">
         <option>Option 1</option>
         <option>Option 2</option>
      </select></p>
      <p>Click the button to open tab 2 and close this tab.</p>
      <input type="button" name="openTab2" value="Open Tab 2" onclick="openTab(2)" />
   </div>
   <div id="tabs-2">
      <p>This is my second tab. It shows when you click the button in tab 1. Tab 1 and 2 should never appear together.</p>
      <p>Click the button to open tab 3. This tab will remain open.</p>
      <input type="button" name="openTab3" value="Open Tab 3" onclick="openTab(3,false)" />
      <p>Click this button to "create" tab 4 using the create method on a local div.</p>
      <input type="button" name="createTab4" value="Create Tab 4" onclick="createTab4()" />
      <p>Click this button to "create" tab 5 using the create method using ajax for content.</p>
      <input type="button" name="createTab5" value="Create Tab 5" onclick="createTab5()" />
   </div>
   <div id="tabs-3">
      <p>This is my third tab tab. It shows when you click the button in tab 2. It can show along with tab 2.</p>
      <p>Click the button to open tab 1 again. Any other open tabs will close.</p>
      <input type="button" name="openTab1" value="Open Tab 1" onclick="openTab(1)" />
   </div>
</div>
<div id="tabs-4" style="display:none;">
   <p>This tab is created using the create method but when I remove you won't be able to add it again with this content.</p>
   <p>Click the button to kill this tab.</p>
   <input type="button" name="killTab4" value="Kill This Tab" onclick="removeTab4()" />
</div>
<table>
</table>

</body>
</html>